$dash_background_color: if($variant == 'light', rgba(#f1f1f1, 0.35), rgba(#222222, 0.75));
$dash_placeholder_size: 32px;
$dash_padding: $base_padding * 1.5;
$dash_border_radius: $modal_radius + $dash_padding;

#dash {
  margin-top: $base_spacing * 2;

  .placeholder {
    background-image:none;
    background-size: contain;
    height: $dash_placeholder_size;
  }

  .empty-dash-drop-target {
    width: $dash_placeholder_size;
    height: $dash_placeholder_size;
  }

  .overview-icon {
    padding: $dash_padding / 2;
  }

  // Running app indicator (shown in dash)
  .app-well-app-running-dot {
    background-color: if($variant == 'light', rgba(black, 0.75), rgba(white, 0.75));
    margin-bottom: $dash_padding + 2px; // hardcoded
  }
}

.dash-background {
  background-color: $dash_background_color;
  margin-bottom: $base_padding * 2;
  padding: $dash_padding $dash_padding - 2px;
  spacing: $base_padding;
  border-radius: $dash_border_radius;
}

// Dash Items
.dash-item-container {
  margin: 0 2px;

  > * { margin: 0; }

  .app-well-app, .show-apps {
    padding: $dash_padding 0 $dash_padding + $base_padding * 2;
  }
}

.dash-separator {
  width: 1px;
  margin: 0 $base_margin $dash_padding;
  background-color: rgba(white, 0.25);
}
